<template>
    <div style="padding:20px">
        <div>
            <fieldset style="width:60%">
                <legend>检索服务人员与服务对象</legend>
                <div style="padding:20px">
                    <div>
                        <div style="margin-bottom:15px">服务人员搜索:</div>
                        <el-input v-model="filter.name" placeholder="请输入服务人员姓名" style="width:230px"></el-input>
                        <el-input v-model="filter.certifID" placeholder="请输入服务人员身份证" style="width:230px"></el-input>
                        <el-button type="primary" @click="searchOrgMember">检索</el-button>
                    </div>
                    <div style="margin-top:20px">
                        <div style="margin-bottom:15px">(大陆)服务对象搜索:</div>
                        <el-input v-model="filter2.name" placeholder="请输入服务对象姓名" style="width:230px"></el-input>
                        <el-input v-model="filter2.certifID" placeholder="请输入服务对象身份证" style="width:230px"></el-input>
                        <el-button type="primary" @click="searchServed">检索</el-button>
                        <div style="margin-bottom:15px;margin-top:20px">(外籍人士)服务对象搜索:</div>
                        <el-input v-model="foreignerFilter.name" placeholder="请输入服务对象姓名" style="width:230px"></el-input>
                        <el-input v-model="foreignerFilter.certificateNumber" placeholder="请输入证件号码" style="width:230px"></el-input>
                        <el-button type="primary" @click="searchForeignerServed">检索</el-button>
                    </div>
                </div>
            </fieldset>
        </div>

        <div style="margin-top:20px">
           <fieldset style="width:60%">
                <legend>服务记录--添加</legend>
                <div style="margin-left:30%">
                    <el-steps :active="active" >
                        <el-step title="步骤 1" description="上传服务记录的基本信息"></el-step>
                        <el-step title="步骤 2" description="上传服务记录的图片和视频"></el-step>
                    </el-steps>
                </div>
                <el-form v-if="active==1" label-position="top" style="margin-top:10px" label-suffix=":">
                    <el-form-item label="服务人员姓名(检索后自动填入)">
                        <el-input style="width:300px" placeholder="检索后自动填入" disabled v-model="OrgMember.name"></el-input>
                    </el-form-item>
                    <el-form-item style="width:600px" label="服务对象姓名(检索后自动填入)">
                        <el-row>
                            <el-col :span="12">
                                <el-input placeholder="检索后自动填入" disabled v-model="ServedPerson.name"></el-input>
                            </el-col>
                            <el-col :span="12">
                                <el-button @click="showServedInfo(ServedPerson.servedPersonID)" style="margin-left:10px" type="text">查看服务对象详细信息</el-button>
                            </el-col>
                        </el-row>
                    </el-form-item>
                    <el-form-item label="服务日期">
                        <el-date-picker v-model="ServedPersonRecord.serverDate" @change="changeDate" placeholder="请输入服务日期"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="服务内容">
                        <el-input v-model="ServedPersonRecord.serverInf" :rows="areaRows" type="textarea"></el-input>
                    </el-form-item>
                </el-form>
                <div v-if="active==2">
                    <div style="margin-left:25%">
                        <h4>图片上传（支持多图）</h4>
                        <el-upload
                            class="upload-demo"
                            :action="getDomain()+'/msmis/api/served/addRecordPicture?ID='+id"
                            :on-preview="handlePreview"
                            :on-remove="handleRemove"
                            :file-list="fileList2"
                            :headers="header"
                            list-type="picture">
                            <el-button size="small" type="primary">点击上传</el-button>
                            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                        </el-upload>
                    </div>
                    <div style="margin-left:25%;margin-top:100px;">
                        <h4>视频上传</h4>
                        <el-upload
                        class="upload-demo"
                        drag
                        :headers="header"
                        :action="getDomain()+'/msmis/api/served/addRecordVideo?ID='+id"
                        multiple>
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">将视频拖到此处，或<em>点击上传</em></div>
                    </el-upload>
                    </div>
                </div>
                <div align="right">
                    <el-button @click="save" v-if="active!==2" type="success">保存,下一步</el-button>
                    <el-button @click="$router.go(0)" v-if="active==2" type="primary">返回上一步,继续添加</el-button>
                    <el-button @click="$router.go(-1)" v-if="active==2" type="success">添加结束</el-button>
                </div>
           </fieldset>
        </div>

        <el-dialog title="服务人员检索结果" :visible.sync="dialogVisible">
            <div>
                <el-table :data="orgMemberInfo">
                    <!-- <el-table-column prop="orgMemberID" label="编号"></el-table-column> -->
                    <el-table-column prop="name" label="姓名"></el-table-column>
                    <el-table-column prop="certID" label="身份证"></el-table-column>
                    <el-table-column label="选择">
                        <template scope="scope">
                            <input @click="selectMember(scope.row)" type="radio" name="check">
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="服务对象检索结果" :visible.sync="servedVisible">
            <div>
                <el-table :data="ServedPersonInfo">
                    <el-table-column prop="servedPersonID" label="编号"></el-table-column>
                    <el-table-column prop="name" label="姓名"></el-table-column>
                    <el-table-column prop="certifID" label="身份证"></el-table-column>
                    <el-table-column prop="certificateNumber" label="证件(境外人员)"></el-table-column>
                    <el-table-column label="选择">
                        <template scope="scope">
                            <input @click="selectServed(scope.row)" type="radio" name="check">
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="servedVisible = false">取 消</el-button>
                <el-button type="primary" @click="servedVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import * as api from "@/api/zonghezhili/duiwujianshe";
import { getToken } from '../../utils/auth';

export default {
  data() {
    return {
      header:{
        token:getToken()
      },
      fileList2: [],
      active: 1,
      id:'',
      filter: {
        //普通大陆人
        name: "", // 姓名
        certifID: "", // 身份证
        page:1,
        pageSize:100
      },
      filter2:{
          name:'',
          certifID:''
      },
      foreignerFilter: {
        //外籍人士
        name: "", // 姓名
        certificateNumber: "" //证件号码
      },
      dialogVisible: false,
      servedVisible: false,
      areaRows: 5,
      orgMemberInfo: [

      ],
      ServedPersonInfo: [

      ],
      OrgMember: {},
      ServedPerson: {},
      ServedPersonRecord: {
        orgMemberName:'',
        orgMemberCertID:'',
        servedPersonName:'',
        servedPersonCertID:'',
        servedPersonType:'',
        serverInf:'',
        serverDate:''
      }
    };
  },
  methods: {
    getDomain(){
      return 'http://' + window.location.host;
    },
    changeDate(val){
        this.ServedPersonRecord.serverDate = val
    },
    searchOrgMember() {
      api.getServedStuff(this.filter).then(res=>{
            this.orgMemberInfo = res.data.vos
      })
      this.dialogVisible = true;
    },
    searchServed() {
      api.selectByNameAndCertifID(this.filter2.name,this.filter2.certifID).then(res=>{
          this.ServedPersonInfo = res.data
      })
      this.servedVisible = true;
    },
    searchForeignerServed(row) {
      // 查询外籍服务对象
      this.servedVisible = true;
    },
    selectMember(row) {
      // 选择服务人员
      this.OrgMember = row;
      this.ServedPersonRecord.orgMemberName = row.name;
      this.ServedPersonRecord.orgMemberCertID = row.certID;
    },
    selectServed(row) {
      // 选择服务对象
      this.ServedPerson = row;
      this.ServedPersonRecord.servedPersonName = row.name;
      this.ServedPersonRecord.servedPersonCertID = row.certifID
    },
    selectForeigner(row) {
      // 选择外籍服务对象
      this.ServedPerson = row;
      this.ServedPersonRecord.servedPersonID = row.servedPersonID;
    },
    showServedInfo(id) {
      // 查看服务对象的详细信息
      if (id !== undefined && id !== "")
        this.$router.push({ path: "ServedPersonDetail", query: { id: id } });
      else this.$message.error("请先检索并添加服务对象！");
    },
    pre() {
      this.active = 1;
    },
    save() {
      api.addServiceRecord(this.ServedPersonRecord).then(res=>{
          this.id = res.data
      })
      this.active < 2 ? ++this.active : this.active;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    }
  }
};
</script>

<style scoped>

</style>
